在這之前程式碼結束都是沒有加分號的，覺得加分號比較清楚，這邊開始程式碼結束都會加上分號

今日任務:認識Canvas，可用滑鼠在畫面上塗鴉，並不斷改變筆刷顏色與粗細

HTML

<canvas id="draw" width="800" height="800"></canvas>

Canvas 基本用途

<canvas>有一個方法(method)叫 getContext()，透過此方法可以取得渲染環境及其繪圖函數(function)；getContext()輸入參數只有渲染環境類型一項，像本教學所討論的 2D 繪圖，就是輸入”2d”。

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');

畫布設置整個視窗寬高

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

• strokeStyle = color設定勾勒圖形時用的顏色.
• lineJoin = type線條樣式
• lineCap = type設定線條結尾的樣式。。

ctx.strokeStyle = '#ffaa00';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';

監聽滑鼠，按下才開始繪圖，放開就停止繪圖

canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', () => (isDrawing = true));
canvas.addEventListener('mouseup', () => (isDrawing = false));
canvas.addEventListener('mouseout', () => (isDrawing = false));

let isDrawing = false;
let lastX = 0;
let lastY = 0;

function draw(e) {
    if (!isDrawing) return; //如果滑鼠還沒按下去就不執行直接return
    console.log(e);
    
}

從lastX,lastY開始畫到滑鼠位置

 function draw(e) {
    if (!isDrawing) return; //如果滑鼠還沒按下去就不執行直接return
    console.log(e);
    ctx.beginPath();
    //start from
    ctx.moveTo(lastX, lastY);
    //go to
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
} 

都是從lastX,lastY(0,0)開始

處理lastX,lastY，終點變成下一條的起點

[lastX, lastY] = [e.offsetX, e.offsetY];

但是一開始還是從(0,0)開始，起始位置改成滑鼠按下的位置

canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

筆刷顏色

當hue是0的時候是紅色

let hue = 0;

function draw(e) {
    ...
    ctx.strokeStyle = `hsl(${hue},100%,50%)`; //改變顏色
}

寫上++就可以慢慢變色(為了不讓它無限+上去要歸零)

 function draw(e) {
     ...
    ctx.strokeStyle = `hsl(${hue},100%,50%)`;//改變顏色
    hue++;
    if (hue >= 360) {
        hue = 0;
    }
}

來處理筆刷大小

筆刷預設為100， direction為true，就會進入遞減，
等筆刷為1的時候，再次反轉 direction，進入遞增

ctx.lineWidth = 100;
let direction = true;

function draw(e) {
    ...
    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
        direction = !direction;
    }
    if (direction) {
        ctx.lineWidth++;
    } else {
        ctx.lineWidth--;
    }
}

合成效果 globalCompositeOperation(可要加不加)

ctx.globalCompositeOperation = 'multiply';
加之前

加之後

今日學習到的:

• getContext()，透過此方法可以取得渲染環境及其繪圖函數
• strokeStyle 設定勾勒圖形時用的顏色
• lineJoin 線條樣式
• lineCap 設定線條結尾的樣式

效果連結:連結

參考連結:
MDN:Canvas 基本用途
MDN:globalCompositeOperation